"use client"
import React, { useState } from 'react';
import {
  HomeOutlined,
  SettingOutlined,
  UserOutlined,
  BoxPlotOutlined,
  DatabaseOutlined,
  FileProtectOutlined,
  CreditCardOutlined,
  CommentOutlined,
  UploadOutlined,
  LineChartOutlined,
  PayCircleOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons';
import { Button, Layout, Menu, Breadcrumb, Watermark } from 'antd';
const { Header, Sider, Content } = Layout;
import { useRouter, usePathname } from 'next/navigation';
import { sider } from '@/utils/dictionary'
import Home from '@/app/admin/home/page'
import { getDictionary } from '@/utils/dictionary'
const items = [
  {
    key: '/admin',
    icon: <HomeOutlined />,
    label: '首页',
  },
  {
    key: '/admin/config',
    icon: <SettingOutlined />,
    label: '配置中心',
  },
  {
    key: '/users',
    icon: <UserOutlined />,
    label: '人员管理',
    children: getDictionary(['/admin/users']).map((v: any) => {
      return {
        key: v?.path,
        label: v?.name,
      };
    }),
  },
  // {
  //   key: '/admin/member/',
  //   icon: <CrownOutlined />,
  //   label: '会员管理',
  // },
  {
    key: '/admin/battery',
    icon: <BoxPlotOutlined />,
    label: '电池管理',
  },
  {
    key: '/admin/contract',
    icon: <FileProtectOutlined />,
    label: '租赁合同',
  },
  {
    key: '/admin/power-station',
    icon: <DatabaseOutlined />,
    label: '电站管理',
  },
  {
    key: '/admin/maintenance',
    icon: <CreditCardOutlined />,
    label: '维护记录',
  },
  {
    key: '/admin/payment',
    icon: <UploadOutlined />,
    label: '支付情况',
  },
  {
    key: '/admin/recycle',
    icon: <PayCircleOutlined />,
    label: '回收记录',
  },
  {
    key: '/admin/conversation',
    icon: <CommentOutlined />,
    label: '会话中心',
  },
  {
    key: '/admin/trend',
    icon: <LineChartOutlined />,
    label: '趋势分析',
  },
]
export default function Admin({ children }: any) {
  const [collapsed, setCollapsed] = useState(false);
  const router = useRouter()
  const pathName = usePathname()
  console.log(pathName);

  return (
    <Watermark style={{ height: '100%' }} content={["绿能芯租"]}>
      <Layout style={{ height: '100%' }}>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '.3125rem', backgroundColor: '#eee', borderRadius: 10, padding: '.3125rem .625rem' }}>
            <img src="/imgs/logo.png" alt="" width='40' style={{ borderRadius: 10 }} />
            {!collapsed && (<span className='admin-title line-ellipsis' style={{ fontSize: 24, color: '#051e3d' }}>&nbsp;绿能芯租</span>)}
          </div>
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={[pathName]}
            defaultOpenKeys={['/users']}
            onClick={(e) => { router.push(e.key) }}
            items={items}
          />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: '#fff', display: 'flex', alignItems: 'center', height: 44, justifyContent: 'space-between' }}>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '1rem',
                width: 44,
                verticalAlign: 'middle'
              }}
            />
            <div style={{ display: 'flex', alignItems: 'center', marginRight: 20 }}>
              <img src="/imgs/picture.jpg" alt="" width={30} height={30} style={{ borderRadius: '50%', marginLeft: 10 }} />
              <span style={{ margin:'0 .625rem 0 .1875rem' }}>admin</span>
            <Button
              onClick={() => router.push('/')}
              size="small"
            >退出</Button>
            </div>
          </Header>
          <Content style={{ margin: '0 1rem', display: 'flex', flexDirection: 'column' }}>
            {pathName !== '/admin/trend' && pathName !== '/admin' && <Breadcrumb style={{ padding: 10 }} items={[{ title: sider.find(v => v.path === pathName)?.name }]} />}
            {children ? children : <Home />}
          </Content>
        </Layout>
      </Layout>
    </Watermark>
  );
};
